.flex{

  &-1{
    flex: 1;
  }

  &-shrink{
    flex-shrink: 0;
  }

  &-x{
    display: flex;
  }

  // 水平居中
  &-align-center{
   align-items: center;
  }

  // 垂直对齐
  &-y{
    display: flex;
    flex-direction: column;
  }

  // 左右对齐
  &-lr{
    justify-content: space-between;
  }

  //垂直居中
  &-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  // 换行
  &-wrap{
    flex-wrap: wrap;
  }

  &-nowrap{
    flex-wrap: nowrap;
  }

  // 反向
  &-reverse{
    flex-direction: row-reverse;
  }

  &-row-center{
    display: flex;
    align-items: center;
  }
}
